<template>
  <div class="search">
    <div class="search-box">
      <van-icon name="search" />
      <input
        type="text"
        v-model="keyword"
        @focus="$router.push('/search')"
        ref="searchboxws"
      />
      <!-- @keyup.enter="search" -->
      <a>搜索</a> 
      <!-- @click="search" -->
    </div>
    <div v-if="shoplists==0">
    <van-empty image="search" description="搜索不到……" />      
    </div>
    <div v-else>
      <shop-list :shoplist="shoplists"></shop-list>
    </div>
    <!-- <div>{{result}}</div> -->
  </div>
</template>
<script>
import ShopList from "@/components/ShopList";
export default {
  props: {
    keywords: [String,Number],
    shoplist: Array,
    // shoplist
  },
  data() {
    return {
      res: null,
      shoplists: [],
      keyword:"",
    };
  },
  // created() {
  //   this.axios.get(`"/products?&keyword=${keywords}"`).then((res) => {
  //     console.log(res);
  //   });
  // },
  created() {
    // console.log(this.$attr.keyword);
    // console.log(this.$route.params.keyword); 
    let key=this.$route.params.keyword;
    this.axios.get(`/products?&keyword=${key}`).then((res) => {
      // console.log(res);
      this.shoplists = res;
      // console.log(this.shoplists);
      this.keyword=key;
      // this.keyword= this.keywords;
    });
  },
mounted() {
  },
  methods: {
  },
  components: {
    ShopList,
  },
};
</script>
<style scoped lang="less">
.search {
  width: 100%;
  padding: 5px 0;
  .search-box {
    margin: 5px 75px 5px 5px;
    background-color: #f7f7f7;
    border-radius: 40px;
    padding: 0 25px;
    position: relative;
    i {
      position: absolute;
      font-size: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #666;
      left: 10px;
      &.fa-times-circle {
        right: 10px;
      }
    }
    input {
      height: 20px;
      font-size: 14px;
      background-color: transparent;
      border: none;
      outline: none;
      color: #333;
      padding: 5px 0px 5px 10px;
    }
    a {
      position: absolute;
      right: -60px;
      background: transparent;
      border: none;
      color: #000000bd;
      font-size: 20px;
      padding: 5px;
    }
  }
}
</style>